<template>
	<view class="mine-page">
		<van-nav-bar title="我的" />

		<view class="profile-item">
			<image :src="defaultImg" mode="aspectFill"></image>
			<view class="text">
				<h3 @click="login()">{{ userData.id ? userData.username :'一键登录'}}</h3>
				<p v-if="!userData.id">登录摩托帝，体验更多功能~</p>
			</view>
		</view>

		<view class="mine-list">

			<!-- 修改信息 -->
			<view class="mine-item" @click="Go('/pages/userInfo/userInfo')">
				<view>
					<image src="../../static/icon/edit.png" mode="widthFix"></image>
					<text>修改信息</text>
				</view>
				<van-icon name="arrow" />
			</view>

			<!-- 我的发布 -->
			<view class="mine-item" @click="Go('/pages/My-release/My-release')">
				<view>
					<image src="../../static/icon/text.png" mode="widthFix"></image>
					<text>我的发布</text>
				</view>
				<van-icon name="arrow" />
			</view>

			<!-- 我的订单 -->
			<view class="mine-item" @click="followUp">
				<view>
					<image src="../../static/icon/order.png" mode="widthFix"></image>
					<text>我的订单</text>
				</view>
				<van-icon name="arrow" />
			</view>

			<!-- 我的收藏 -->
			<view class="mine-item" @click="Go('/pages/collect/collect')">
				<view>
					<image src="../../static/icon/collect.png" mode="widthFix"></image>
					<text>我的收藏</text>
				</view>
				<van-icon name="arrow" />
			</view>

			<!-- 地址管理 -->
			<view class="mine-item" @click="Go('/pages/address/address')">
				<view>
					<image src="../../static/icon/address.png" mode="widthFix"></image>
					<text>地址管理</text>
				</view>
				<van-icon name="arrow" />
			</view>

		</view>
	</view>



</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onShow
	} from '@dcloudio/uni-app'

	import {
		useMoto
	} from '../../pinia/index.js'


	import {
		showConfirmDialog,
		showToast,
	} from 'vant';
	import $api from '../../request/index.js'


	const moto = useMoto()
	// 用户的个人信息
	let userData = ref({})
	let defaultImg = ref('../../static/moto_profile.png')
	let id = ref('')

	onShow(() => {
		// 判断登录
		if (!moto.login) {
			return Islogin()
		}

		// 获得用户的详情
		$api.get('/moto/User/findUserIsHand').then(res => {
			userData.value = res.data
			defaultImg.value = res.data.photo
			id.value = res.data.id
			console.log('用户的详情', res)
		})
	})


	// 弹窗 跳转登录
	const Islogin = () => {
		showConfirmDialog({
			title: '请先登录',
			message: '是否立即登录?',
			showCancelButton: true,
		}).then(() => {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		})
	}

	const followUp = () => {
		showToast('暂未开发，敬请期待')
	}


	// 判断是否跳转登录
	const login = () => {
		if (moto.login) {
			return
		}
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}


	// 跳转
	const Go = path => {
		console.log(path)
		if (!moto.login) {
			return Islogin()
		}
		uni.navigateTo({
			url: path
		})
	}
</script>

<style>
	.mine-page {
		height: 100%;
		background-image: url('../../static/background/IMG_4681.JPG');
		background-size: 100%;
	}

	.profile-item {
		width: 100%;
		height: 400rpx;
		background-color: rgba(255, 255, 225, 0.3);
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.profile-item>image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.text>p {
		font-size: 12px;
		margin-top: 10rpx;
	}

	.mine-list {
		box-sizing: border-box;
		height: calc(100vh - 296px);
		padding: 0 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-color: rgba(255, 255, 255, 0.85);
	}

	.mine-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.mine-item>view {
		display: flex;
		align-items: center;
	}

	.mine-item image {
		width: 60rpx;
		margin-right: 20rpx;
	}

	.van-nav-bar__content {
		background-color: var(--van-nav-bar-background);
	}

	:root:root {
		--van-nav-bar-background: var(--van-background-2);
		--van-background-2: #0078FE;
	}
</style>